import FormData from "../../../types/FormData";
import NumberProps from "./NumberProps";
import {ComponentProps, VueComponent} from "vue3-oop";
import {NInput, NCollapse, NCollapseItem, NFormItem, NInputNumber, NSelect, NRadioGroup, NRadioButton} from "naive-ui";


interface IProps {
  formData: FormData,
  widgetProps: NumberProps
}
export default class NumberConfig extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    formData: {},
    widgetProps: {}
  }

  render() {
    const {formData, widgetProps} = this.props;
    const parseNumber = (value:any)=>(value && value.trim().length>0 && !isNaN(value)) ? Number(value) : null;

    return (
      <NCollapse>
        <NCollapseItem name="BASIC" title="基本属性">
          <NFormItem label="组件标识">
            <NInput disabled value={widgetProps.widgetId}/>
          </NFormItem>
          <NFormItem label="组件类型">
            <NInput disabled value={widgetProps.widgetLabel}/>
          </NFormItem>
        </NCollapseItem>
        <NCollapseItem name="LAYOUT" title="布局属性">
          <NFormItem label="组件宽度">
            <NInputNumber
              value={widgetProps.layout_reactive.span} min={1} max={24}
              onUpdateValue={(value)=>{widgetProps.layout_reactive.span=value||12;}}
            />
          </NFormItem>
          <NFormItem label="默认状态">
            <NSelect
              value={widgetProps.layout_status}
              options={[{ label: '隐藏', value: '0' }, { label: '占位', value: '1' }, { label: '可见', value: '2' }]}
              onUpdateValue={(value) => {widgetProps.layout_status=value}}
            />
          </NFormItem>
        </NCollapseItem>
        <NCollapseItem name="INPUT" title="字段属性">
          <NFormItem label="字段编码">
            <NInput
              value={widgetProps.field_code}
              onUpdateValue={(value)=>{widgetProps.field_code=value||'';}}
            />
          </NFormItem>
          <NFormItem label="字段标签">
            <NInput
              value={widgetProps.field_label}
              onUpdateValue={(value)=>{widgetProps.field_label=value||'';}}
            />
          </NFormItem>
          <NFormItem label="标签宽度">
            <NInputNumber
              value={widgetProps.formitem_labelWidth} min={50} max={500}
              onUpdateValue={(value)=>{widgetProps.formitem_labelWidth=value||50;}}
            />
          </NFormItem>
          <NFormItem label="标签对齐">
            <NRadioGroup size="small" value={widgetProps.formitem_labelAlign} onUpdateValue={(value)=>{widgetProps.formitem_labelAlign=value}}>
              <NRadioButton value="left" label="左"/>
              <NRadioButton value="right" label="右"/>
            </NRadioGroup>
          </NFormItem>
          <NFormItem label="默认值">
            <NInputNumber
              value={parseNumber(widgetProps.field_default)}
              onUpdateValue={(value)=>{widgetProps.field_default = ""+value;}}
            />
          </NFormItem>
        </NCollapseItem>
      </NCollapse>
    )
  }
}